<template>
  <div class="page">
    <div class="control">
      <Button type="primary" @click="reset">画布重置</Button>
      <Button type="primary" @click="bt">打开弹窗</Button>
      <Button type="primary" @click="exportData">导出数据</Button>
    </div>
    <component :is="componentId" ref="antvX6"></component>
    <Modal
      v-model="modal1"
      title="Common Modal dialog box title"
      @on-ok="ok"
      @on-cancel="cancel"
      width="760"
      draggable
      sticky>
      <div class="flowChart">
        <antv ref="antv_X6"></antv>
      </div>
    </Modal>
  </div>
</template>

<script>
import AntvX6 from '@/components/AntvX6'
export default {
  name: 'page',
  components: {
    antv: AntvX6
  },
  data () {
    return {
      componentId: 'antv',
      modal1: false
    }
  },
  mounted () {
    this.$refs.antvX6.initGraph(this.$refs.antvX6.$el)
  },
  methods: {
    bt () {
      this.modal1 = true
      this.$nextTick(() => {
        this.$refs.antv_X6.initGraph(this.$refs.antv_X6.$el)
      })
    },
    reset () {
      this.$refs.antvX6.destroy()
      this.$refs.antvX6.initGraph(this.$refs.antvX6.$el)
    },
    ok () {
      this.$refs.antv_X6.destroy()
    },
    cancel () {
      this.$refs.antv_X6.destroy()
    },
    exportData () {
      this.$refs.antvX6.exportData()
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  height: 100%;
  .control {
    position: fixed;
    top: 30px;
    left: 30px;
    z-index: 9;
    button {
      margin: 0 10px;
    }
  }
}
.flowChart {
  height: 350px;
}
</style>
